<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     *  1. 单分支：使用 && 运算     if
     *  2. 双分支：if...else  三元表达式
     *  3. 多分支：封装成函数
     * 
     *  插值语法，也可以渲染react元素
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    const oDiv = (<div id='box'>我是div</div>);//react元素

    let flag = true;// 

    // 也可以实现但分支条件渲染，相对麻烦
    let single = null;
    if(flag){
        single = oDiv;
    }

    // 
    let loading = false; // 加载标识符
    let double = null;
    if(loading){
        double = <div>页面正在加载中....</div>
    }else{
        double = <div>正文内容....</div>
    }

    function run(age){
        let style = null;
        if(age <= 3){
            style = <div>爬</div>
        }else if(age > 3 && age <= 7){
            style = <div>疯跑</div>
        }else if(age > 7 && age < 18){
            style = <div>飞</div>
        }
        return style;
    }

    root.render((
        <div>
            <h3>插值语法渲染react元素</h3>
            {oDiv}
            <h3>单分支渲染</h3>
            {flag && oDiv}
            {single}

            <h3>双分支</h3>
            {loading ? <div>页面正在加载中....</div> : <div>正文内容</div>}
            {double}

            <h3>多分支</h3>
            {run(2)}
            {run(6)}
        </div>
    ))
</script>
</html>